<template>
    <view class="container">
        <!-- 顶部图片和Tab切换区域 -->
        <view class="top-section">
            <scroll-view class="scrollable-img" scroll-y>
                <view class="image-wrapper">
                    <image :src="filePath" mode="widthFix" />
                </view>
            </scroll-view>
        </view>
        <view class="tabs">
            <view class="tab-item" :class="{ active: currentTab === 'answer' }" @click="switchTab('answer')">
                答案解析
            </view>
        </view>
        <!-- 消息区域 -->
        <view class="message-container">
            <scroll-view class="scrollable-content" scroll-y :scroll-into-view="'msg-' + lastMessageId">
                <view v-for="(msg, index) in chatMessages" :key="index" :id="'msg-' + index" class="chat-message"
                    :class="{ 'user-message': msg.isUser }">
                    <view class="message-avatar">
                        <image v-if="!msg.isUser" class="avatar" src="/static/brick.png"></image>
                    </view>
                    <view class="message-bubble" :class="{ 'user-bubble': msg.isUser }">
                        在这个示例中，我做了以下调整：

                        顶部区域：使用 top-section 类来包含顶部图片和 Tab 切换区域，确保它们水平排列。
                        消息区域：使用 message-container 类来包含消息区域，确保它可以滚动且不遮挡其他内容。
                        输入框区域：使用 input-container 类来包含输入框和按钮，确保它们固定在底部且不遮挡消息区域。
                        这样，顶部区域、切换区域、消息区域和输入框区域都将水平排列，且不会互相遮挡。消息区域的消息内容不会因为字数多而被输入框遮挡。
                        在这个示例中，我做了以下调整：

                        顶部区域：使用 top-section 类来包含顶部图片和 Tab 切换区域，确保它们水平排列。
                        消息区域：使用 message-container 类来包含消息区域，确保它可以滚动且不遮挡其他内容。
                        输入框区域：使用 input-container 类来包含输入框和按钮，确保它们固定在底部且不遮挡消息区域。
                        这样，顶部区域、切换区域、消息区域和输入框区域都将水平排列，且不会互相遮挡。消息区域的消息内容不会因为字数多而被输入框遮挡。
                        在这个示例中，我做了以下调整：

                        顶部区域：使用 top-section 类来包含顶部图片和 Tab 切换区域，确保它们水平排列。
                        消息区域：使用 message-container 类来包含消息区域，确保它可以滚动且不遮挡其他内容。
                        输入框区域：使用 input-container 类来包含输入框和按钮，确保它们固定在底部且不遮挡消息区域。
                        这样，顶部区域、切换区域、消息区域和输入框区域都将水平排列，且不会互相遮挡。消息区域的消息内容不会因为字数多而被输入框遮挡。
                        在这个示例中，我做了以下调整：

                        顶部区域：使用 top-section 类来包含顶部图片和 Tab 切换区域，确保它们水平排列。
                        消息区域：使用 message-container 类来包含消息区域，确保它可以滚动且不遮挡其他内容。
                        输入框区域：使用 input-container 类来包含输入框和按钮，确保它们固定在底部且不遮挡消息区域。
                        这样，顶部区域、切换区域、消息区域和输入框区域都将水平排列，且不会互相遮挡。消息区域的消息内容不会因为字数多而被输入框遮挡。
                        在这个示例中，我做了以下调整：

                        顶部区域：使用 top-section 类来包含顶部图片和 Tab 切换区域，确保它们水平排列。
                        消息区域：使用 message-container 类来包含消息区域，确保它可以滚动且不遮挡其他内容。
                        输入框区域：使用 input-container 类来包含输入框和按钮，确保它们固定在底部且不遮挡消息区域。
                        这样，顶部区域、切换区域、消息区域和输入框区域都将水平排列，且不会互相遮挡。消息区域的消息内容不会因为字数多而被输入框遮挡。
                    </view>
                    <view class="message-avatar">
                        <image v-if="msg.isUser" class="avatar" src="/static/user.jpg"></image>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 输入框区域 -->
        <!-- <view class="input-container">
            <input class="input-message" type="text" v-model="inputMessage" @input="onKeyInput"
                placeholder="请输入消息,如：举一反三" @confirm="handleSend" />
            <uni-icons class="send-button" type="paperplane-filled" size="30" @click="handleSend"></uni-icons>
            <uni-icons class="camera-button" type="camera-filled" size="30" @click="handleCapture"></uni-icons>
        </view> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            filePath: '/static/search.png',
            currentTab: 'answer',
            chatMessages: [
                // 示例消息数据
                { content: '这是一条消息', isUser: false },
                // 更多消息...
            ],
            inputMessage: '',
            lastMessageId: 0, // 用于 scroll-into-view
        };
    },
    methods: {
        switchTab(tab) {
            this.currentTab = tab;
        },
        onKeyInput(event) {
            this.inputMessage = event.target.value;
        },
        handleSend() {
            if (this.inputMessage.trim()) {
                // 处理发送逻辑
                console.log('发送消息:', this.inputMessage);
                this.inputMessage = '';
            }
        },
        handleCapture() {
            // 处理拍照逻辑
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-section {
    display: flex;
    align-items: center;
    width: 100%;
}

.scrollable-img {
    height: 20vh;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.tab-item.active {
    color: #007aff;
    border-bottom: 2px solid #007aff;
}

.message-container {
    padding: 10px;
}

.scrollable-content {
    height: 50vh;
}

.input-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%; 
    height: 10vb
}

.input-message {
    flex: 1;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    margin-right: 10px;
}

.send-button,
.camera-button {
    padding: 10px;
    background-color: #3faded;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.chat-message {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.message-bubble {
    background-color: #ffffff;
    color: #000000; 
    border-radius: 8px; 
    white-space: normal; 
    overflow: inherit;
}

.user-bubble {
    background-color: #31f17e;
    color: #fff;
}

.message-avatar {
    margin-right: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
</style>